<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
  <!-- <link rel="stylesheet" href="../code/bootstrap-3.4.1-dist/css/bootstrap.css"> -->

  <title>Document</title>
  <style>
    .clearbox::after {
      content: '';
      clear: both;
      display: block;
    }

    .slide {
      width: 200px;
      height: 500px;
      background-color: #f3f3f3;
      float: left;
      padding: 10px;
      /* margin-right:10px */

    }

 
    .navbar {
      width: 1190px;
      margin: 0 auto;
    }

    .container {
      width: 1190px;
      padding: 0;
    }

    .navbar-btn {
      background-color: rgb(90, 192, 90);
      color: white;
      float: right;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .btn-left {
      background-color: #3479b5;
      color: white;
    }

    .container .navbar-form {
      width: 100%;
      margin:0;
    }

    .breadcrumb {
      width: 100%;
    }
 
    .content {
      width: 990px;
    }
   .content table{
      width: 980px;
      margin-left:10px;
    }
    .glyphicon-pencil{
      background-color: rgb(90, 192, 90);
      color: white;
      border:1px solid rgb(90, 192, 90);
    }
    .glyphicon-remove{
      background-color: #dd302d;
      color:white;
      border:1px solid #dd302d;
    }

  </style>
</head>

<body>
  <!-- 导航条 -->
  <nav class=" navbar navbar-inverse">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">用户 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div class="container clearbox">
    <div class="slide">
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active"><a href="#">
            商品管理
          </a></li>
        <li role="presentation"><a href="#">商品列表</a></li>
        <li role="presentation"><a href="#">添加商品</a></li>
        <li role="presentation"><a href="#">订单管理</a></li>
      </ul>
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active"><a href="#">用户管理</a></li>
        <li role="presentation"><a href="#">用户列表</a></li>
        <li role="presentation"><a href="#">添加用户</a></li>
      </ul>
    </div>
    <div class="content left clearbox">
      <ol class="breadcrumb ">
        <li><a href="#">首页</a></li>
        <li><a href="#">商品管理</a></li>
        <li class="active">商品列表</li>
      </ol>
      <form class="navbar-form navbar-left clearbox " role="search">
        <div class="form-group  left">
          <input type="text" class="form-control" placeholder="搜索...">
        </div>
        <button type="submit" class="btn btn-default btn-left  left">搜索</button>
        <button type="button" class="btn btn-default navbar-btn">添加</button>
        <table class="table table-striped table-bordered table-hover table-condensed"></table>
      </form>

      <table class="table  table-bordered table-hover table-condensed left">
        <tr>
          <th>商品编号</th>
          <th>商品名称</th>
          <th>商品数量</th>
          <th>商品价格</th>
          <th>商品描述</th>
          <th>操作商品</th>

        </tr>
        <tr>
          <td>001</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
        <tr>
          <td>002</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
        <tr>
          <td>003</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
        <tr>
          <td>004</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
        <tr>
          <td>005</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
        <tr>
          <td>006</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
        <tr>
          <td>007</td>
          <td>火山飘雪</td>
          <td>24</td>
          <td>88</td>
          <td>西红柿撒白糖。。。</td>
          <td><button class="glyphicon glyphicon-pencil btn btn-default btn-xs" aria-hidden="true">编辑</button>
            <button class="glyphicon glyphicon-remove btn btn-default btn-xs" aria-hidden="true">删除</button>
          </td>
        </tr>
      </table>
      <nav aria-label="Page navigation clearbox">
        <ul class="pagination right">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>

  </div>

  <script src="./jquery-2.1.4/jquery-2.1.4.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>

</html>